<template>
  <div class="h-full flex flex-col">
    <div class="flex-1 overflow-hidden">
      <img
        class="w-full h-full"
        :src="require('@/assets/page1/bg_top.jpg')"
        alt=""
      />
      <div class="logo-wrapper">
        <img
          :src="require('@/assets/page1/logo.png')"
          class="logo center"
          alt=""
        />
      </div>
    </div>

    <img class="w-full" :src="require('@/assets/page1/bg_bot.jpg')" alt="" />
    <div class="btn-wrapper">
      <img
        class="btn_bot center"
        :src="require('@/assets/page1/btn.png')"
        @click="gotoPage"
        alt=""
      />
    </div>

    <Page2 :visiable.sync="page2" @gotoPage7="gotoPage7"></Page2>
    <Page6 :visiable.sync="page6"></Page6>
    <Page7 :visiable.sync="page7"></Page7>
  </div>
</template>

<script>
import Page2 from './Page2.vue';
import Page6 from './Page6.vue';
import Page7 from './Page7.vue';
import service from '@/service';
export default {
  name: '',
  components: {
    Page2,
    Page6,
    Page7,
  },
  data() {
    return {
      page2: false,
      page6: false,
      page7: false,
      res: {},
    };
  },
  created() {
    service.getUerMsg().then((res) => {
      this.res = res;
      if (this.res.shareUrl) {
        // 已提交过5
        return;
      }
      if (res.address) {
        // 已提交过3
        this.$router.push('/page5');
        return;
      }
      // if (this.res.age && this.res.age > 18 && this.res.age <= 30) {
      //   // 提交过2
      //   if (
      //     // 库存年龄符合
      //     (res.stock1 > 1 && this.res.oldUser) ||
      //     (res.stock2 > 1 && !this.res.oldUser)
      //   ) {
      //     this.$router.push('/Page3');
      //     return;
      //   }
      // }
    });
  },
  methods: {
    gotoPage7() {
      this.page2 = false;
      this.page7 = true;
    },
    gotoPage() {
      service.getUerMsg().then((res) => {
        this.res = res;

        if (this.res.age && this.res.age > 30) {
          this.gotoPage7();
          return;
        }
        if (this.res.shareUrl) {
          // 已提交过5
          this.page6 = true;
          return;
        }
        // 提交过2
        if (res.age) {
          if (
            // 库存年龄符合
            (res.stock1 > 1 && this.res.oldUser) ||
            (res.stock2 > 1 && !this.res.oldUser)
          ) {
            this.$router.push('/Page3');
            return;
          } else {
            this.page7 = true;
            return;
          }
        }

        this.page2 = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '../styles/function.scss';
.logo-wrapper {
  position: absolute;
  top: switchwidth(105);
  width: 100%;
}
.logo {
  width: switchwidth(828);
}
.btn-wrapper {
  width: 100%;
  position: absolute;
  bottom: switchwidth(153);
  z-index: 1;
}
.btn_bot {
  width: switchwidth(515);
}
</style>
